// 列表组件
<template>
  <table>
    <thead>
      <tr>
        <!--  -->
        <th v-for="item in list" :key="item.id">{{ item.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="it in bodylist" :key="it.id">
          <!-- 表头的列，决定下面的列 -->
     <td v-for="item in list" :key="item.id">{{ it[item.id] }}</td>
        <td><button @click="optEvt(row)">操作</button></td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      require: true,
    },
    bodylist: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    optEvt(row) {
      // 支持自定义事件   childEvt  是在父组件绑定的自定义函数
      this.$emit('childEvt',row)
    },
  },
};
</script>